<template>
	<div>
		<a-card style="margin-top: 12px;">
			<div>
				<a-form-model layout="horizontal" :model="form" ref="queryForm" :labelCol="{span: 7}"
					:wrapperCol="{span: 17, offset: 0}">
					<div class="fold">
						<a-row>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="接口名称" prop="name">
									<a-input v-model="form.name" />
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="终端编号" prop="username">
									<a-input v-model="form.terminalCode" />
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="接口类型" prop="type">
									<a-select allowClear v-model="form.type"
										:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
										<a-select-option :value="0">查询</a-select-option>
										<a-select-option :value="1">新增</a-select-option>
										<a-select-option :value="2">编辑</a-select-option>
										<a-select-option :value="3">删除</a-select-option>
										<a-select-option :value="4">其它</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="接口版本" prop="version">
									<a-select allowClear v-model="form.version"
										:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
										<a-select-option value="V1">V1</a-select-option>
										<a-select-option value="V2">V2</a-select-option>
										<a-select-option value="V3">V3</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="请求结果" prop="status">
									<a-select allowClear v-model="form.status">
										<a-select-option v-for="item in dict.status" :key="item.key"
											:value="item.value">{{item.title}}</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="操作系统" prop="os">
									<a-input v-model="form.os" />
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="终端IP" prop="terminalIp">
									<a-input v-model="form.terminalIp" />
								</a-form-model-item>
							</a-col>
							<a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="操作时间" prop="requestTime">
									<a-range-picker :allowClear="false"
										:ranges="{ 今天: [moment(), moment()], '本月': [moment().startOf('month'), moment().endOf('month')] }"
										v-model="form.requestTime" :format="format" :valueFormat="format"
										style="width: 100%" :placeholder="['开始时间', '结束时间']" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row type="flex" justify="end">
							<a-button @click="submitForm" type="primary">查询</a-button>
							<a-button @click="resetForm" style="margin-left: 8px">重置</a-button>
						</a-row>
					</div>
				</a-form-model>
			</div>
		</a-card>
		<a-card style="margin-top: 12px;">
			<div>
				<div>
					<a-button class="space-vertical" @click="exportAction" type="primary" v-auth="`log:logApi:export`">
						导出
					</a-button>
				</div>
				<standard-table ref="table" :size="`middle`" :page="page" :pageSize="pageSize" :total="total"
					:loading="loading" :columns="columns" :dataSource="dataSource" @onPageChange="onPageChange">
					<div slot="type" slot-scope="{text}">
						<span v-if="text == 0">查询</span>
						<span v-if="text == 1">新增</span>
						<span v-if="text == 2">编辑</span>
						<span v-if="text == 3">删除</span>
						<span v-if="text == 4">其它</span>
					</div>
					<div slot="version" slot-scope="{text}">
						<code>{{text}}</code>
					</div>
					<div slot="status" slot-scope="{text}">
						<a-badge :status="text == 1 ? 'success' : 'error'" :text="text | dictFilter(dict.status)" />
					</div>
				</standard-table>
			</div>
		</a-card>
	</div>
</template>

<script>
	import StandardTable from '@/components/table/standard-table'
	import moment from 'moment'
	import {
		logApiService
	} from '@/services'
	import {
		tableToExcel
	} from '@/utils/excel-util'

	const columns = [{
			title: '序号',
			dataIndex: 'no',
			width: 80,
			scopedSlots: {
				customRender: 'no'
			}
		},
		{
			title: '接口名称',
			dataIndex: 'name',
			width: 200,
			ellipsis: true
		},
		{
			title: '接口类型',
			dataIndex: 'type',
			width: 80,
			scopedSlots: {
				customRender: 'type'
			},
		},
		{
			title: '接口版本',
			dataIndex: 'version',
			width: 80,
			scopedSlots: {
				customRender: 'version'
			},
		},
		{
			title: '请求URL',
			dataIndex: 'url',
			width: 240,
			ellipsis: true
		},
		{
			title: '终端编号',
			dataIndex: 'terminalCode',
			width: 150,
			ellipsis: true
		},
		{
			title: '终端IP',
			dataIndex: 'terminalIp',
			width: 140
		},
		{
			title: '目标系统IP',
			dataIndex: 'targetIp',
			width: 140,
			ellipsis: true
		},
		{
			title: '操作系统',
			dataIndex: 'os',
			width: 180,
			ellipsis: true
		},
		{
			title: '请求结果',
			dataIndex: 'status',
			width: 80,
			scopedSlots: {
				customRender: 'status'
			},
		},
		{
			title: '请求时间',
			dataIndex: 'requestTime',
			width: 160
		}
	]
	export default {
		name: 'LogApi',
		components: {
			StandardTable
		},
		data() {
			return {
				format: 'yyyy-MM-DD',
				loading: false,
				page: 1,
				pageSize: 10,
				total: 0,
				columns: columns,
				dataSource: [],
				form: {
					name: undefined,
					terminalCode: undefined,
					terminalIp: undefined,
					os: undefined,
					version: undefined,
					type: undefined,
					status: undefined,
					requestTime: [moment().startOf('month').format('yyyy-MM-DD'), moment().endOf('month').format(
						'yyyy-MM-DD')]
				},
				dict: {
					status: []
				}
			}
		},
		filters: {
			dictFilter: (val, dictList) => {
				const dict = dictList.find(item => item.value == val)
				return dict ? dict.title : '未知'
			}
		},
		authorize: {
			exportAction: 'log:logApi:export'
		},
		methods: {
			moment,
			reloadTable() {
				this.page = 1
				this.queryListAction()
			},
			onPageChange(pagination) {
				this.page = pagination.current
				this.pageSize = pagination.pageSize
				this.queryListAction()
			},
			resetForm() {
				this.$refs.queryForm.resetFields()
				this.form.requestTime = [moment().startOf('month').format('yyyy-MM-DD'), moment().endOf('month').format(
					'yyyy-MM-DD')]
				this.reloadTable()
			},
			submitForm() {
				this.reloadTable()
			},
			exportAction() {
				// this.$message.success('敬请期待!')
				logApiService.exportExcel(null).then(res => {
						const result = res.data
						if (result.code === 200) {
							let columns = this.$refs.table.columns;
							let widths = []
							for (var i = 0; i < columns.length; i++) {
								widths.push({
									wpx: columns[i].width
								})
							}
							tableToExcel(document.querySelector('table'), widths, '接口调用日志')
						}
					}).finally(this.loading = false)
				
			},
			queryListAction() {
				this.loading = true
				const params = {
					page: this.page,
					pageSize: this.pageSize,
					queryParams: this.form
				}
				logApiService.queryList(JSON.stringify(params)).then(res => {
					const result = res.data
					if (result.code === 200) {
						this.dataSource = []
						this.dataSource = result.data.records
						this.total = result.data.totalCount
					}
				}).finally(this.loading = false)
			}
		},
		created() {
			this.getDict(JSON.stringify({
				code: 'SYS_OPERATION_RESULT'
			})).then(res => this.dict.status = res.data.data)
			this.reloadTable()
		}
	}
</script>
<style scoped lang="less">
	.ant-form-item {
		margin-bottom: 12px;
	}

	.fold {
		width: calc(100% - 12px);
		display: inline-block;
	}

	@media screen and (max-width: 900px) {
		.fold {
			width: 100%;
		}
	}
</style>
